<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cone</title>
<script src="../libs/raf_polyfill.js"></script>
<script src="../libs/gl-matrix-min.js"></script>
<script id="shader-vs" type="shader">
	attribute vec3 aVertexPosition;
	
	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;
	
	void main(void){
		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
		gl_PointSize = 3.0;
	}
</script>
<script id="shader-fs" type="shader">
	void main(void){
		gl_FragColor = vec4(0.5,0.9,0.2,1.0);
	}
</script>
<script>
	var gl = null,
		program = null,
		vertices = [],
		indices = [],
		width = 0,
		height = 0;
	
	var mvMatrix = mat4.create(),
		pMatrix = mat4.create();
		
	var coneVertexBuffer = null,
		coneIndexBuffer = null;
		
	function initProgram(){
		var vertexShader = makeShader(document.getElementById("shader-vs").innerHTML, gl.VERTEX_SHADER);
		var fragmentShader = makeShader(document.getElementById("shader-fs").innerHTML, gl.FRAGMENT_SHADER);
		program = gl.createProgram();
		gl.attachShader(program, vertexShader);
		gl.attachShader(program, fragmentShader);
		gl.linkProgram(program);
		if (!gl.getProgramParameter(program, gl.LINK_STATUS))
			alert('linking error');
		gl.useProgram(program);
		
		program.vertexPosition = gl.getAttribLocation(program, "aVertexPosition");
		getMatrixUniforms();
	}
	
	function makeShader(src, type){
		var shader = gl.createShader(type);
		gl.shaderSource(shader, src);
		gl.compileShader(shader);
		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
			alert('compiling error');
		return shader;
	}
	
	function getMatrixUniforms(){
		program.pMatrixUniform = gl.getUniformLocation(program, "uPMatrix");
		program.mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
	}
	
	function setMatrixUniforms(){
		gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
		gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
	}
	
	function initBuffers(){
		vertices =[1.5, 0, 0,
					-1.5, 1, 0,
					-1.5, 0.809017,	0.587785,
					-1.5, 0.309017,	0.951057,
					-1.5, -0.309017, 0.951057,
					-1.5, -0.809017, 0.587785,
					-1.5, -1, 0,
					-1.5, -0.809017, -0.587785,
					-1.5, -0.309017, -0.951057,
					-1.5, 0.309017,	-0.951057,
					-1.5, 0.809017,	-0.587785];
 
			indices = [0, 1, 2,
			0, 2, 3,
			0, 3, 4,
			0, 4, 5,
			0, 5, 6,
			0, 6, 7,
			0, 7, 8,
			0, 8, 9,
			0, 9, 10,
			0, 10, 1];
			
			coneVertexBuffer = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, coneVertexBuffer);
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
			
			coneIndexBuffer = gl.createBuffer();
			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, coneIndexBuffer);
			gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
			
			gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
			gl.bindBuffer(gl.ARRAY_BUFFER, null);
	}
	
	function drawScene(){
		gl.clearColor(0.0, 0.0, 0.0, 1.0);
		gl.enable(gl.DEPTH_TEST);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
		gl.viewport(0, 0, width, height);
		
		mat4.perspective(45, width / height, 0.1, 10000.0, pMatrix);
		mat4.identity(mvMatrix);
		mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
		
		setMatrixUniforms();
		
		gl.bindBuffer(gl.ARRAY_BUFFER, coneVertexBuffer);
		gl.vertexAttribPointer(program.vertexPosition, 3, gl.FLOAT, false, 0, 0);
		gl.enableVertexAttribArray(program.vertexPosition);
		
		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, coneIndexBuffer);
		gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT, 0);
	}
	
	function renderLoop(canvas){
		requestAnimationFrame(renderLoop, canvas);
		drawScene();
	}
	
	function runWebGLApp(){
		var canvas = document.getElementById("my-cavas");
		width = canvas.width;
		height = canvas.height;
		try
		{
			gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
		}
		catch (e){}
		initProgram();
		initBuffers();
		renderLoop(canvas);
	}
</script>
</head>

<body onload="runWebGLApp()">
	<canvas id="my-cavas" width="480" height="400"></canvas>
</body>
</html>
